<!-- 运营端登录页面 -->
<template>
  <div class="page">
    <div class="content">
      <div class="bg-block" />
      <div class="login-box">
        <p class="title">数据学徒运营端</p>
        <p class="tip">请使用账号登录</p>
        <div class="list-box">
          <div class="label">
            <p class="label-title" style="margin-right: 18px; font-size: 24px">
              账号
            </p>
            <p class="label-tip" style="margin-right: 22px">Account</p>
          </div>
          <div class="value">
            <input
              v-model="adminLoginForm.username"
              autocomplete="new-accounts"
              class="value-input"
              placeholder="手机号码"
              maxlength="11"
              @blur="getTannaId"
            >
          </div>
        </div>
        <div class="list-box">
          <div class="label">
            <p class="label-title" style="margin-right: 18px; font-size: 24px">
              密码
            </p>
            <p class="label-tip" style="margin-right: 22px">Password</p>
          </div>
          <div class="value">
            <input
              v-model.number="adminLoginForm.password"
              type="password"
              class="value-input"
              placeholder="密码"
            >
          </div>
        </div>
        <div class="list-box">
          <div class="label">
            <p class="label-title">图形验证码</p>
            <p class="label-tip" style="margin-right: 10px">
              Verification Code
            </p>
          </div>
          <div class="value">
            <input
              v-model="adminLoginForm.code"
              style="width: 200px"
              class="value-input"
              placeholder="图形验证码"
              @keyup.enter="handleLogin"
            >
            <img
              :src="codeUrl"
              style="display: block; height: 40px"
              @click="getCode"
            >
          </div>
        </div>
        <div v-show="errCode" class="code-tip">
          {{ ["", "账号", "密码", "图形验证码"][errCode] }}输入错误，请重新输入
        </div>
        <el-checkbox
          v-model="adminLoginForm.rememberMe"
          style="margin: 15px 0px 25px 0px"
        >记住密码</el-checkbox>

        <div class="login-btn" @click="handleLogin">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from '@/api/login'
import { getIdByUsername } from '@/api/school-admin-api/hireManage'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      codeUrl: '',
      loading: false,
      mobile: '',
      // 运营登录
      adminLoginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      errCode: 0,
      tenantId: null
    }
  },
  created() {
    Cookies.remove('tenantId')
    localStorage.setItem('loginType', 'admin')
    this.getCode()
    this.getCookie()
  },
  methods: {
    getCode() {
      // 请求远程，获得验证码
      getCodeImg().then((res) => {
        res = res.data
        this.captchaEnable = res.enable
        if (this.captchaEnable) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.adminLoginForm.uuid = res.uuid
        }
      })
    },
    getTannaId() {
      return new Promise((resolve, reject) => {
        getIdByUsername({ username: this.adminLoginForm.username }).then(
          (res) => {
            Cookies.remove('tenantId')
            if (res.code === 0) {
              this.tenantId = res.data
              Cookies.set('tenantId', this.tenantId)
              resolve()
            } else {
              Cookies.set('tenantId', 0)
              reject()
            }
          }
        )
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.adminLoginForm = {
        username:
          username === undefined ? this.adminLoginForm.username : username,
        password:
          password === undefined
            ? this.adminLoginForm.password
            : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    async handleLogin() {
      const { username, code, password } = this.adminLoginForm
      if (!username) {
        this.errCode = 1
        return
      }
      if (!password) {
        this.errCode = 2
        return
      }
      if (!code) {
        this.errCode = 3
        return
      }
      this.errCode = 0
      if (this.tenantId === null) {
        await this.getTannaId()
      }
      this.loading = true
      // 运营端默认id为0
      Cookies.set('tenantId', this.tenantId)
      // 设置 Cookie
      if (this.adminLoginForm.rememberMe) {
        Cookies.set('username', this.adminLoginForm.username, {
          expires: 30
        })
        Cookies.set('password', encrypt(this.adminLoginForm.password), {
          expires: 30
        })
        Cookies.set('rememberMe', this.adminLoginForm.rememberMe, {
          expires: 30
        })
      } else {
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }
      // 发起登陆
      this.$store
        .dispatch('adminLogin', this.adminLoginForm)
        .then(() => {
          this.$router.push({ path: '/index/index' }).catch(() => {})
        })
        .catch(() => {
          this.loading = false
          this.getCode()
        })
    }
  }
}
</script>

<style lang="scss" scope>
.page {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .el-select {
    width: 100% !important;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .content {
    position: relative;
    height: 100vh;
    min-height: 630px;
    z-index: 1;
    margin-top: 0 !important;
    .bg-block {
      width: 100%;
      height: 100%;
      background: url("../assets/images/company-login-bg.jpeg") no-repeat center;
      background-size: cover;
      filter: blur(2px);
    }
    .login-box {
      width: 534px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 630px;
      right: 110px;
      z-index: 99;
      background: #ffffff;
      box-shadow: 0px 5px 11px 0px rgba(70, 75, 83, 0.19);
      border-radius: 12px;
      padding: 35px 25px 70px;

      .title {
        font-size: 32px;
        font-weight: 600;
        color: #37383d;
        line-height: 45px;
        margin-bottom: 6px;
      }

      .tip {
        font-size: 18px;
        font-weight: 400;
        color: #b0b0b0;
        line-height: 25px;
        margin-bottom: 33px;
      }

      .list-box {
        height: 75px;
        border-bottom: 1px solid #d4d6da;
        display: flex;
        align-items: center;

        .label {
          display: flex;
          flex-direction: column;

          .label-title {
            font-size: 18px;
            color: #37383d;
            line-height: 25px;
            margin-bottom: 2px;
          }

          .label-tip {
            font-size: 15px;
            color: #9597a0;
            line-height: 21px;
          }
        }

        .value {
          border-left: 1px solid #d4d6da;
          padding-left: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          flex: 1;

          .value-title {
            font-size: 24px;
            color: #37383d;
            line-height: 33px;
          }

          .value-input {
            border: none;
            font-size: 24px;
            outline: none;
          }

          .value-tip {
            font-size: 24px;
            font-weight: 500;
            color: #4a90e2;
            cursor: pointer;
          }

          .icon {
            font-size: 18px;
            color: #b7bfce;
          }

          .code {
            position: absolute;
            cursor: pointer;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 24px;
            font-weight: 500;
            color: #4a90e2;
            line-height: 33px;
          }
        }
      }

      .login-btn {
        height: 70px;
        background: #4677b9;
        border-radius: 4px;
        font-size: 25px;
        font-weight: 600;
        color: #ffffff;
        line-height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        margin-top: 15px;
        cursor: pointer;
        &.checked {
          background: #c8c8c8;
          cursor: not-allowed;
        }
      }

      .login-tip {
        font-size: 18px;
        font-weight: 400;
        color: #969696;
        line-height: 25px;
        display: flex;
        align-items: center;
      }

      .login-agreement {
        color: #4a90e2 !important;
        cursor: pointer;
      }

      .login-check {
        margin-right: 10px;
      }

      .code-tip {
        position: relative;
        margin-top: 12px;
        font-size: 18px;
        font-weight: 400;
        color: #ff5469;
        line-height: 25px;
      }

      .toLinks {
        position: absolute;
        color: green;
        text-align: center;
        cursor: pointer;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
input::-webkit-input-placeholder {
  color: #c4c4c4;
}
.el-select-dropdown__item {
  font-size: 18px;
}
</style>
